import React from 'react'
import { Input } from 'antd'
import styles from './index.less'

/**
 * 输入搜索框
 */
export default class InputSearch extends React.PureComponent {
  /**
   * 包装过的onChange
   */
  wrappedOnChange = (e) => {
    const { onChange, onSearch } = this.props
    const bool = e.nativeEvent.type === 'click' && e.target.value === ''
    onChange && onChange(e)
    this.setState({}, () => {
      if (bool && onSearch) {
        onSearch()
      }
    })
  };

  render() {
    const {
      value, onChange, onSearch, allowClear, onKeyDown, ...restProps
    } = this.props
    return (
      <Input
        allowClear
        className={styles.input_search}
        value={value}
        onChange={this.wrappedOnChange}
        {...restProps}
        onPressEnter={(e) => {
          onSearch && onSearch(value)
        }}
        suffix={
          value === null || value === undefined || value === '' ? (
            <i className="iconfont icon-sousuo" />
          ) : (
            <i
              className="iconfont icon-shibai"
              onClick={(e) => {
                onChange
                  && onChange({
                    target: {
                      value: '',
                    },
                  })
                this.setState({}, () => {
                  onSearch && onSearch(value)
                })
              }}
            />
          )
        }
      />
    )
  }
}
